<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover"
                 class="mgb20"
                 style="height: 600px;">
          <div v-for="item in trainingList"
               :key="item">
            <img :src="item.cover"
                 alt
                 style="text-align: center;width: 400px;" />
          </div>
          <div class="user-info"></div>
          <div class="text item">
            <el-progress type="circle"
                         :percentage="this.trainingProgressing.Progressing"></el-progress>
            <span style="line-height: 50px; text-align: center; font-size: 18px">完成进度</span>
          </div>

        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="box-card"
                 style="height: 600px; width: 100%">
          <div slot="header"
               class="clearfix">
            <span v-for="item in trainingList"
                  :key="item"
                  style="font-size: 24px">{{ item.trainingname }}</span>
            <el-button style="float: right; padding: 3px 0"
                       type="text">操作按钮</el-button>
          </div>

          <div v-for="item in courseList"
               :key="item"
               class="text item">
            <img :src="item.cover"
                 alt=""
                 class="user-avator">
            <el-progress type="circle"
                         :percentage="item.accessoryid"></el-progress>
            <span class="name_span" style="line-height: 50px; text-align: center; font-size: 18px">{{ item.coursename }}</span>
            <div class="grid-content bg-purple"
                 style="display:inline;right:50px">
              <el-button type="primary"
                         @click="goStudyCourse(item.id)">我要学习</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
                

<script>
import Schart from 'vue-schart';
import bus from '../common/bus';
export default {
    data() {
        return {
            trainingList: [],
            courseList: [],
            trainDate: [],
            userData: {},
            user: {
                id: -1
            },
            training: {
                id: -1
            },
            skill: {},
            query: {
                trainingid: ''
            },
            courseProgressing: {
                Progressing: 0
            },
            trainingProgressing: {
                Progressing: 0
            }
        };
    },

    created() {
        this.user.id = localStorage.getItem('id');
        this.training.id = localStorage.getItem('trainingid');
        this.getData();
    },

    methods: {
        getData(parameter) {
            this.$axios
                .post('/api/trainings/findTraining/1/1', this.training)
                .then((res) => {
                    this.trainingList = res.data.data.list;
                })
                .catch((err) => {});
            this.$axios
                .post('/api/trainings/findCrouseBytrainingId/', this.training)
                .then((resp) => {
                    this.courseList = resp.data.data;
                    for (let i = 0; i < this.courseList.length; i++) {
                        this.$axios
                            .get('/api/course/findCourseProgressing/' + this.user.id + '/' + this.courseList[i].id)
                            .then((resp) => {
                                this.courseList[i].accessoryid = resp.data.data;
                                this.courseProgressing.Progressing += this.courseList[i].accessoryid;
                                this.trainingProgressing.Progressing = (this.courseProgressing.Progressing / this.courseList.length).toFixed(2);
                            })
                            .catch((err) => {});
                    }
                })
                .catch((err) => {});
        },

        goStudyCourse(courseid) {
            // console.log(courseid);
            // for (let i = 0; i < this.trainingList.length; i++) {
            //console.log(this.trainingList[i].id);
            localStorage.setItem('courseid', courseid);
            this.$router.push({ path: '/studyCourse' });
            // }
        }
    }
};
</script>


<style scoped>

.name_span[data-v-1bc27478] {
    /* margin-top: 49px !important; */
    /* margin-left: 50px; */
    /* height: 40px; */
    position: relative;
    top: -48px;
    left: 125px;
}
.el-button--primary {
    float: right;
    color: #FFF;
    background-color: #409EFF;
    border-color: #409EFF;
    margin-top: 50px;
    margin-right: 97px;
}
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: '';
}
.clearfix:after {
    clear: both;
}

.box-card {
    width: 480px;
}
.el-carousel__item h1 {
    color: white;
    line-height: 200px;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(100, 213, 114);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
img {
    object-fit: cover;
}
</style>
